<template>
	<view>
		<view class="videobox" :style="[{'background-color':videoboxBackgroundColor}]">
			<view class="videolistS-h scoll" :style="[{'width':videolistWidth}]">
				<scroll-view :scroll-x="true" :show-scrollbar="false">
					<view class="scroll-x">
						<view class="videolistS-h-item scroll-x-videoitem"
						v-for="(item,index) in  videolist" :key="index"
						:data-item="item"
						@click="videoTap"
						>
							<view class="Imagebox">
								<!-- 封面 -->
								<image class="Image" 
								:src="item.image||item.bannerfile.url"
								mode="aspectFill"
								></image>
								<!-- 顶部VIP角标||收藏等 -->
								<view class="top" v-if="item.videotype===1">
									<text class="top-text">VIP</text>
								</view>
								<!-- 底部评分等 -->
								<view class="bottom">
									<text class="bottom-text">{{item.jishu}}</text>
								</view>
							</view>
							<view class="videotitle">
								<!-- 标题 -->
								<view class="title">
									<text class="title-text">{{item.title}}</text>
								</view>
								<!-- 摘要 -->
								<view class="desc">
									<view class="desc-item">
										<text class="desc-text jishu">{{item.description}}</text>
									</view>
									<!-- <view class="desc-item right">
										<text class="desc-text time">05:32</text>
									</view> -->
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import videoitem from '@/FatFatMeng-ui/components/FatFatMeng-videolistS-v/mixins/videoitem.js'
	export default {
		mixins:[videoitem],
		props:{
			// 数据列表
			videolist:{
				type:Array,
				default:[]
			},
			// 外盒子背景色
			videoboxBackgroundColor:{
				type:String,
				default:'rgba(255, 255, 255, .0)'
			},
			// 内盒子宽度
			videolistWidth:{
				type:String,
				default:'690rpx'
			}
		},
		name:"FatFatMeng-videolistS-h-scoll",
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	@import './videolistS-h-scoll.scss';
</style>
